<template>
    <view class="tar">
        <ant-tabs type="primary" :items="items" :current="current" onChange="onChange" />

        <swiper :current="current" :autoplay="false" :vertical="false" :circular="false" onChange="onSwipeChange">
            <block v-for="(item, index) in items" :key="index">
                <swiper-item>
                    <view class="containercontent">
                        <container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
                            <view>
                                <view class="container">
                                    <image class="left" mode="scaleToFill" :src="item.image" />
                                    <view class="content">
                                        <view class="title1">
                                            {{ item.name }}
                                        </view>
                                        <view class="title2">
                                            {{ item.interpretation }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.dingdannumber }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.adress }}
                                            <view class="title2right">￥{{ item.price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="headerRight" style="color: #f48315">
                                {{ item.state }}
                            </view>
                        </container>
                    </view>
                </swiper-item>

                <swiper-item>
                    <view class="containercontent">
                        <container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
                            <view>
                                <view class="container">
                                    <image class="left" mode="scaleToFill" :src="item.image" />
                                    <view class="content">
                                        <view class="title1">
                                            {{ item.name }}
                                        </view>
                                        <view class="title2">
                                            {{ item.interpretation }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.dingdannumber }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.adress }}
                                            <view class="title2right">￥{{ item.price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="headerRight" style="color: #f48315">
                                {{ item.state }}
                            </view>
                        </container>
                    </view>
                </swiper-item>

                <swiper-item>
                    <view class="containercontent">
                        <container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
                            <view>
                                <view class="container">
                                    <image class="left" mode="scaleToFill" :src="item.image" />
                                    <view class="content">
                                        <view class="title1">
                                            {{ item.name }}
                                        </view>
                                        <view class="title2">
                                            {{ item.interpretation }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.dingdannumber }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.adress }}
                                            <view class="title2right">￥{{ item.price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="headerRight" style="color: #f48315">
                                {{ item.state }}
                            </view>
                        </container>
                    </view>
                </swiper-item>

                <swiper-item>
                    <view class="containercontent">
                        <container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
                            <view>
                                <view class="container">
                                    <image class="left" mode="scaleToFill" :src="item.image" />
                                    <view class="content">
                                        <view class="title1">
                                            {{ item.name }}
                                        </view>
                                        <view class="title2">
                                            {{ item.interpretation }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.dingdannumber }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.adress }}
                                            <view class="title2right">￥{{ item.price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="headerRight" style="color: #f48315">
                                {{ item.state }}
                            </view>
                        </container>
                    </view>
                </swiper-item>

                <swiper-item>
                    <view class="containercontent">
                        <container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
                            <view>
                                <view class="container">
                                    <image class="left" mode="scaleToFill" :src="item.image" />
                                    <view class="content">
                                        <view class="title1">
                                            {{ item.name }}
                                        </view>
                                        <view class="title2">
                                            {{ item.interpretation }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.dingdannumber }}
                                        </view>
                                        <view class="title2">
                                            <ant-icon type="LocationFill" />
                                            {{ item.adress }}
                                            <view class="title2right">￥{{ item.price }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="headerRight" style="color: #f48315">
                                {{ item.state }}
                            </view>
                        </container>
                    </view>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script>

export default {
                    components: {
                    
                    },
                    data() {
            return {
  current: 2,
  items: [{
    title: '全部'
  }, {
    title: '待支付'
  }, {
    title: '待确认'
  }, {
    title: '带出行'
  }, {
    title: '售后'
  }],
  dingdan: [{
    number: '订单编号  y123412341',
    name: '厦门园林植物园',
    interpretation: '游客通用票',
    // dingdannumber: '0234-2343 2134.2134.23',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
    adress: ' 思明区湖苑里24号',
    price: '100',
    state: '待确认'
  }, {
    number: '订单编号  y123412341',
    name: '厦门园林植物园',
    interpretation: '游客通用票',
    dingdannumber: '0234-2343 2134.2134.23',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
    adress: ' 思明区湖苑里24号',
    price: '100',
    state: '待支付'
  }, {
    number: '订单编号  y123412341',
    name: '厦门园林植物园',
    interpretation: '游客通用票',
    dingdannumber: '0234-2343 2134.2134.23',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
    adress: ' 思明区湖苑里24号',
    price: '100',
    state: '已完成'
  }]
};
        },
methods: {
    onSwipeChange(e) {
      this.setData({
        current: e.detail.current
      });
    },

    onChange(current) {
      this.setData({
        current
      });
    },

    handleChange(current) {
      this.setData({
        current
      });
    },

    onPlus() {
      this.alert('plus');
    },

    alert(content) {
      uni.alert({
        title: content
      });
    }
}
                };
</script>
<style>
.list {
    display: flex;
    flex-direction: column;
}
page {
    background-color: #f7f7f7;
}
.left {
    padding: 8px;
    background-image: url('https://img1.baidu.com/it/u=2381623835,372689691&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1719507600&t=572698b6469b1ae18d9a56a5d63973e3');
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.containercontent {
    margin: 15px 15px 0 15px;
}
.container {
    display: flex;
    color: #333333;
    border-radius: 10px;
}
.content {
    margin-left: 10px;
    line-height: 1.6;
    width: 70%;
}
.title1 {
    font-size: 18px;
}
.title2 {
    font-size: 14px;
    color: gray;
}
.title2right {
    float: right;
    color: red;
    font-size: 16px;
}
.tar {
    width: 100%;
    padding-bottom: 15px;
}

</style>
